<template>
    <!-- 联系人电话 ContactTel -->
    <!-- 联系人名称 StoreName -->
    <view class="customer-list-item" @click="goDetail">
        <image src="/static/img/default.png" mode="aspectFill" class="default-img"></image>
        <view class="customer-list-r">
            <view class="info touch">
                <view class="info-main">
                    <view class="">
                        <text class="info-name" :style="item.StatusName != '正常状态' ? 'color:#999' : ''">{{
                            item.StoreName
                            }}</text>
                        <text class="tags">{{ item.DealerGradeName }}</text>
                    </view>
                    <view class="right" v-if="!isSelect">
                        <view class="rightbtn" v-if="item.StatusName == '正常状态'" @click.stop="valetFn">代下单</view>
                        <view class="rightbtn rightbtnno" v-if="item.StatusName == '禁用'" @click.stop="valetFn">已禁用
                        </view>
                        <view class="rightbtn rightbtnno" v-if="item.StatusName != '禁用' && item.StatusName != '正常状态'"
                            @click.stop="valetFn">未开通</view>
                    </view>
                </view>
                <text class="address text-show-line-1">{{ item.Address }}</text>
            </view>
        </view>
    </view>
</template>

<script>
import easyTag from "@/components/easy/easy-tag.vue"
export default {
    components: {
        easyTag,
    },
    props: {
        item: {
            type: Object,
            default: () => { },
        },
        index: {
            type: Number,
            default: 0,
        },
        selectType: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            isSelect: true,
        }
    },
    created() {
        this.isSelect = this.selectType
    },
    mounted() { },
    methods: {
        goDetail() {
            if (this.isSelect) {
                switch (this.selectType) {
                    case "1":
                        //代退货
                        this.easyGoTo("/pages_shop/packet/return/billList?userId=" + this.item.StoreUserId)
                        break
                    case "2":
                        //代下单
                        this.valetFn()
                        break
                    case "3":
                        //报价下单
                        this.easyGoTo(
                            "/pages/customer/offer-order?valetUserId=" +
                            this.item.StoreUserId +
                            "&valetUserInfo=" +
                            encodeURIComponent(JSON.stringify(this.item)),
                        )
                        break
                    case "4":
                        //一客一价
                        this.easyGoTo(
                            "/pages/private/edit?valetUserId=" +
                            this.item.StoreUserId +
                            "&valetUserInfo=" +
                            encodeURIComponent(JSON.stringify(this.item)),
                        )
                        break
                    default:
                        break
                }
                return
            }
            this.easyGoTo(
                "/pages/customer/detail?StoreId=" + this.item.StoreId + "&StoreUserId=" + this.item.StoreUserId,
            )
        },
        valetFn() {
            if (this.item.Status != 1) {
                this.easyToast("当前客户非正常状态，无法下单")
                return
            }
            //this.easyGoTo('/pages/product/index-valet?valetUserId='+this.item.StoreUserId + "&valetUserInfo="+ encodeURIComponent(JSON.stringify(this.item)))
            this.easyGoTo(
                "/pages/customer/replace-order?valetUserId=" +
                this.item.StoreUserId +
                "&valetUserInfo=" +
                encodeURIComponent(JSON.stringify(this.item)),
            )
        },
    },
}
</script>

<style lang="scss">
.customer-list-item {
    display: flex;
    justify-content: flex-start;
    min-height: 122rpx;
    align-items: center;
    padding: $app-page-padding;
    background: $color-white;
    margin-bottom: 12rpx;

    .default-img {
        width: 80rpx;
        height: 80rpx;
        margin-right: 28rpx;
    }

    .customer-list-r {
        flex: 1;
    }

    .info {
        display: flex;
        flex-direction: column;
        flex: 1;
        justify-content: center;

        .info-main {
            display: flex;
            justify-content: space-between;
            flex: 1;
        }

        .info-name {
            margin-right: 10rpx;
            font-size: $font-size-32;
            font-weight: bold;
            color: #333;
        }

        .tags {
            height: 32rpx;
            padding: 0 8rpx;
            background: #fccc21;
            border-radius: 16rpx 16rpx 16rpx 0rpx;
            font-size: 20rpx;
            color: #ffffff;
        }

        .address {
            margin-top: 18rpx;
            font-size: 28rpx;
            color: $app-color-text-tip;
        }
    }

    .right {
        .rightbtn {
            width: 120rpx;
            height: 48rpx;
            background: $app-color-main;
            border-radius: 24rpx;
            border: 1rpx solid $app-color-main;
            font-size: 24rpx;
            color: #ffffff;
            line-height: 48rpx;
            text-align: center;
        }

        .rightbtnno {
            background: #ffffff;
            color: #252528;
            border: 1rpx solid #252528;
        }
    }
}
</style>
